<template>
  <a-modal v-model:visible="visible" :title="title
    " :width="500" @ok="onSave" @cancel="cancel">
    <a-form ref="formRef" :model="formState" :label-col="{ style: 'width: 100px' }">
      <template v-if="type == 'content'">
        <a-form-item label="套餐描述" required name="content">
          <a-textarea v-model:value="formState.content" placeholder="请输入" :maxlength="300"></a-textarea>
        </a-form-item>
      </template>
      <template v-else-if="type == 'name'">
        <a-form-item label="套餐名称" required name="name">
          <a-input v-model:value="formState.name" placeholder="请输入" :maxlength="50"></a-input>
        </a-form-item>
      </template>
      <template v-else-if="type == 'payFee'">
        <a-form-item label="金额" required name="payFee">
          <a-input v-model:value="formState.payFee" placeholder="请输入" :maxlength="50"></a-input>
        </a-form-item>
      </template>

      <template v-else-if="type == 'totalNum'">
        <a-form-item label="使用次数" required name="totalNum">
          <a-input v-model:value="formState.totalNum" placeholder="请输入" :maxlength="50"></a-input>
        </a-form-item>
      </template>
      <template v-else-if="type == 'packageId'">
        <a-form-item label="绑定套餐" required name="packageId">
          <!-- <a-input v-model:value="formState.packageId" placeholder="请输入" :maxlength="50"></a-input> -->
          <a-select v-model:value="formState.packageId" placeholder="请选择绑定套餐" :options="packageOptions" />
        </a-form-item>
      </template>
      <!-- <template v-else-if="type == 'amount'">
        <a-form-item label="信用分" required name="amount">
          <a-input v-model:value="formState.amount" placeholder="请输入" :maxlength="128"></a-input>
        </a-form-item>
      </template> -->
      <!-- <template v-else>
        <a-form-item label="洗发水(ml)" required name="consumeShampoo">
          <a-input v-model:value="formState.consumeShampoo" placeholder="请输入" :maxlength="128"></a-input>
        </a-form-item>
        <a-form-item label="护发素(ml)" required name="consumeConditioner">
          <a-input v-model:value="formState.consumeConditioner" placeholder="请输入" :maxlength="128"></a-input>
        </a-form-item>
        <a-form-item label="养发液(ml)" required name="consumeHairtonic">
          <a-input v-model:value="formState.consumeHairtonic" placeholder="请输入" :maxlength="128"></a-input>
        </a-form-item>
      </template> -->
    </a-form>
  </a-modal>
</template>

<script setup>
// api
import { postSinglePackageUpdate, postMultiplePackageUpdate, postDeviceUpdateBalance, postSinglePackageList } from "@/api/common";

import { useEditModal } from "@/hooks/useEditModal";
import { message } from "ant-design-vue";
const packageOptions = ref([]);

const props = defineProps({
  packageType: {
    type: String,
    default: "0",
  },
  type: {
    type: String,
    default: "",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});
const titleMsg = {
  name: '套餐名称',
  content: '套餐内容描述',
  packageId: '绑定套餐',
  totalNum: '使用次数',
  payFee: '金额',
}
const title = computed(() => {
  return titleMsg[props.type]
})
const emit = defineEmits(["ok"]);
const rules = {
  dictName: [{ required: true, message: "请输入字典名称" }],
  dictType: [{ required: true, message: "请输入字典类型" }],
};
const formData = {
  id: '',
  name: '',
  content: '',
  packageId: undefined,
  totalNum: '',
  payFee: '',
}
const { visible, formRef, formState } = useEditModal(props, formData);
onMounted(() => {
  postSinglePackageList().then(res => {
    packageOptions.value = res.data?.map(item => {
      return {
        label: item.name,
        value: item.id,
      }
    })
  })
})
const onSave = () => {
  let apiRequest = props.packageType == 0 ? postSinglePackageUpdate : postMultiplePackageUpdate
  formRef.value
    .validate()
    .then(() => {
      apiRequest({
        id: formState.id,
        [props.type]: formState[props.type],

      }).then(() => {
        message.success("编辑成功");
        formRef.value.resetFields();
        visible.value = false;
        emit("ok");
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const cancel = () => {
  formRef.value.resetFields();
};

defineExpose({
  visible,
});
</script>

<style scoped lang="less"></style>
